import './Scss/SupervisionTenders.scss'
import { useState, useEffect, useRef } from 'react'
import { useRequest, useSize } from 'ahooks'
import { Column } from '@ant-design/plots'
import { Http } from '../../../../Common/Api'

export const SupervisionTenders001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const { runAsync } = useRequest(Http, { manual: true })

    const [Charts, setCharts] = useState()

    useEffect(() => {
        if (size) {
            runAsync({ url: 'getconstructionSuperviseOrganizationStat' }).then(res => {
                console.log(res)

                let data = []

                res.forEach(({ totalNum, submittedNum, okNum, notOkNum, organizationName }) => {
                    data = [
                        ...data,
                        { name: '合格数', type: organizationName, value: okNum },
                        { name: '不合格', type: organizationName, value: notOkNum },
                    ]
                })

                const { width, height } = size
                const config = {
                    autoFit: false,
                    width,
                    height,
                    maxColumnWidth: 14,
                    appendPadding: 24,
                    data,
                    isGroup: true,
                    xField: 'type',
                    yField: 'value',
                    seriesField: 'name',
                    color: ['#B2FBFD', '#FAD688'],
                    legend: {
                        layout: 'horizontal',
                        position: 'top',
                        offsetY: 24,
                        itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                    },
                    xAxis: {
                        label: { style: { fill: '#B2FBFD' } },
                        line: { style: { stroke: '#B2FBFD' } },
                        tickLine: { style: { stroke: '#B2FBFD' } },
                    },
                    yAxis: {
                        title: {
                            text: '数量',
                            position: 'end',
                            autoRotate: false,
                            offset: 50,
                            style: { fill: '#B2FBFD' },
                        },
                        tickCount: 5,
                        label: { style: { fill: '#B2FBFD' } },
                        grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                    },
                }
                setCharts(config)
            })
        }
    }, [runAsync, size])

    return (
        <div className="SupervisionTenders001" ref={ChartsBox}>
            {Charts && <Column {...Charts} />}
        </div>
    )
}
